<template>
  <div class="dialog">
    <el-dialog
      :title="titleText"
      :visible.sync="showDialog"
      width="45%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-form
        ref="ruleForm"
        label-position="left"
        :model="formData"
        :rules="rules"
        class="el-form"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户名称:" prop="customerName" class="w100p">
              <el-input v-model="formData.customerName" placeholder="请输入客户名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="统一社会信用代码:" prop="creditCode" class="w100p">
              <el-input
                v-model="formData.creditCode"
                placeholder="请输入统一社会信用代码"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户负责人:" prop="legalBody" class="w100p">
              <el-input v-model="formData.legalBody" placeholder="请输入客户负责人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户联系电话:" prop="tel" class="w100p">
              <el-input v-model="formData.tel" placeholder="请输入客户联系电话" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="客户地址:" prop="address" class="w100p">
              <el-input v-model="formData.address" placeholder="请输入客户地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!-- <el-col :span="12">
                <el-form-item
                  label="  "
                  prop="equipmentName4"
                  class="w100p"
                >
                    <el-input
                        v-model="formData.equipmentName"
                        placeholder="请输入工序名称"
                    />
                </el-form-item>
          </el-col>-->
          <el-col :span="12">
            <el-form-item label="开户行:" prop="bank" class="w100p">
              <el-input v-model="formData.bank" placeholder="请输入工序名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行账号:" prop="bankAccount" class="w100p">
              <el-input v-model="formData.bankAccount" placeholder="请输入银行账号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="营业执照:" prop="pictureNo" class="w100p">
              <el-upload
                ref="upload"
                class="upload-file"
                action
                :limit="1"
                multiple
                :on-remove="params => removePicture(params)"
                :http-request="params => addPicture(params)"
                :file-list="pictureList"
                accept=".png, .jpg, .jpeg, .pdf"
              >
                <el-button
                  v-if="pictureList.length < 1"
                  type="text"
                  class="add-many"
                >
                  <i class="el-icon-plus"></i>
                </el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
            <el-form-item prop="" class="w100p" label="购入产品:" :inline="true">
                <el-table
                    ref="rightTableData"
                    :data="rightTableData"
                    border
                    stripe
                    style="position: relative"
                >
                    <el-table-column label="参数名称" prop="paramName">
                    <template slot-scope="scope">
                        <el-input
                        v-model="scope.row.paramName"
                        placeholder="请选输入参数名称"
                        />
                    </template>
                    </el-table-column>
                    <el-table-column label="参数字段" prop="paramValue">
                    <template slot-scope="scope">
                        <el-input
                        v-model="scope.row.paramValue"
                        placeholder="请选输入参数字段"
                        />
                    </template>
                    </el-table-column>
                    <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-button
                        type="text"
                        style="color: red; text-decoration: underline"
                        size="small"
                        @click.native.prevent="
                            deleteRow(scope.$index, rightTableData)
                        "
                        >
                        删除
                        </el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
                <el-form-item class="w100p">
                    <el-button
                        type="info"
                        plain
                        icon="el-icon-circle-plus-outline"
                        class="addInfo"
                        @click="addRow"
                    >
                        添加
                    </el-button>
            </el-form-item>
        </el-row>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <el-button type="primary" class="savebtn" @click="save('ruleForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import QualityManage from "@/api/processing-management/quarity-manage";
export default {
  name: "",
  components: {},
  props: {
    // 弹框名称
    titleText: {
      type: String,
      default: ""
    },
    show: {
      type: Boolean,
      default: false
    },
    formDataCopy: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formData: {},
      showDialog: this.show,
      // 展示
      // formData: {},
      pictureList: [],
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        }
      ],
      // devs:['测试1','测试2'],
      rules: {
        customerName: [
          {
            required: true,
            message: "请填写客户名称",
            trigger: ["change", "blur"]
          }
        ],
        legalBody: [
          {
            required: true,
            message: "请填写客户负责人",
            trigger: ["change", "input", "blur"]
          }
        ],
        tel: [
          {
            required: true,
            message: "请填写客户联系电话",
            trigger: ["change", "blur"]
          }
        ],
        address: [
          {
            required: true,
            message: "请填写客户地址",
            trigger: ["change", "blur"]
          }
        ]
      },
      rightTableData: []
    };
  },

  watch: {
    show(v) {
      this.showDialog = v;
    },
    formDataCopy(v) {
      this.formData = v;
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 增加行
    addRow() {
      var list = {
        paramName: "",
        paramValue: ""
      };
      this.rightTableData.unshift(list);
    },
    // 删除改行
    deleteRow(index, rows) {
      if (rows[index].templateCode) {
        this.del(rows, index);
      } else {
        rows.splice(index, 1);
      }
    },
    // 删除列表图片
    removePicture(file) {
      const index = this.pictureList.findIndex(item => {
        return item.uid === file.uid;
      });
      this.pictureList.splice(index, 1);
    },
    addPicture(file) {
      this.pictureList.push(file.file);
    },
    save(formData) {
      if (this.pictureList.length > 0) {
        this.formData.pictureNo = "#";
      }
      this.$refs[formData].validate(async valid => {
        if (valid) {
          if (this.pictureList.length > 0) {
            let form = new FormData();
            form.append("file", this.pictureList[0]);
            let res = await QualityManage.addPicture(form);
            if (res.code !== 1) {
              this.$message.error("图片保存失败");
              return;
            }
            this.formData.pictureNo = res.data;
          }
          this.$emit("addEvent", this.formData);
          this.pictureList = [];
          this.close();
        }
      });
    },
    close() {
      this.$emit("closeDialog");
    },
    cancel() {
      this.$emit("closeDialog");
      this.formData = {};
    }
  }
};
</script>

  <style lang="scss" scoped>
::v-deep
  .el-dialog__wrapper
  .el-dialog
  .el-dialog__body
  .el-form
  .el-form-item
  .el-form-item__label {
  min-width: 160px !important;
}
.el-table {
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: hidden;
}
::v-deep .el-table th {
  color: #000;
  background-color: rgba(120, 182, 193, 0.4) !important;
}
::v-deep .el-table .el-table__row--striped {
  color: #000;
  background-color: rgba(186, 186, 186, 0.4) !important;
}
::v-deep.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group,
.el-table th.is-leaf {
  border-color: #d3d3d3 !important;
}
::v-deep .el-table th.is-leaf {
  border-color: #d3d3d3 !important;
}
::v-deep .el-table__empty-text {
  color: #000;
}

.addInfo {
  width: 100%;
  margin: 10px;
  background-color: #006e91;
  color: #fff;
  font-size: 18px;
}
</style>
